<template>
  <div class="findpage">
    <div class="findcity">
      <input type="text" placeholder="请输入您想购买商品名称">
    </div>
    <div class="shopList">
      <van-tabs v-model="active">
    <van-tab >
        <div slot="title">
           全部
        </div>
       <dl>
         <dt><img src="../../static/img_02.jpg"/></dt>
         <dd>
           <h3>Bubble小气泡·毛孔深层清洁管理</h3>
           <p class="time">45min</p>
           <p class="count"><span class="money">￥199.00</span><i>已售：1140</i></p>
         </dd>  
       </dl>
       <dl>
         <dt><img src="../../static/img_02.jpg"/></dt>
         <dd>
           <h3>Bubble小气泡·毛孔深层清洁管理</h3>
           <p class="time">45min</p>
           <p class="count"><span class="money">￥199.00</span><i>已售：1140</i></p>
         </dd>  
       </dl>
       <dl>
         <dt><img src="../../static/img_02.jpg"/></dt>
         <dd>
           <h3>Bubble小气泡·毛孔深层清洁管理</h3>
           <p class="time">45min</p>
           <p class="count"><span class="money">￥199.00</span><i>已售：1140</i></p>
         </dd>  
       </dl>
       <dl>
         <dt><img src="../../static/img_02.jpg"/></dt>
         <dd>
           <h3>Bubble小气泡·毛孔深层清洁管理</h3>
           <p class="time">45min</p>
           <p class="count"><span class="money">￥199.00</span><i>已售：1140</i></p>
         </dd>  
       </dl>  
    </van-tab>
     <van-tab >
        <div slot="title">
             产品
        </div>
        内容
    </van-tab>
     <van-tab >
        <div slot="title">
             服务
        </div>
        内容 
    </van-tab>
       <van-tab >
        <div slot="title">
             卡项
        </div>
        内容 
    </van-tab>
    </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  }
}
</script>

<style lang="less" scoped>
.time{
  width: 1.05rem;
  height: .39rem;
  background: #d9d9d9;
  color: #fff;
  font-size: .12rem;
  box-sizing: border-box;
  border-radius: .07rem;
  margin-top:.22rem;  
}
.count{
   margin-top: 1.6rem;
   display: flex;
   flex-direction: row;
}
.money{
  color: #ff340e;
  flex: 1;
}
.shopList{
  width: 100%;
  box-sizing: border-box;
  // padding: .3rem;
  dl{
    display: flex;
    padding-top: .5rem;
    padding: .3rem;
    dt{
      width: 3.37rem;
      height: 2.97rem;
      margin-right: .29rem;
      img{
        width: 100%;
         height: 2.97rem;
         border-radius: .15rem;
      }
    }
    dd{
      flex: 1;
    }
  }
}
.findpage {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
}
.findcity {
  width: 100%;
  height: 1.5rem;
  display: flex;
  align-items: center;
  input {
    display: inline-block;
    width: 94%;
    margin-left: 2%;
    border: 0.01rem solid #ccc;
    height: 0.93rem;
    border-radius: 0.54rem;
    text-indent: 2em;
    background: #f6f6f6;
  }
}
</style>
<style>
.findpage .van-tabs__line{
    display: none
}

.findpage .van-tab{
  flex: none;
  width: 1.26rem;
  line-height: .8rem;
  background: none;
  font-size: .12rem;
  
}
.findpage .van-hairline--top-bottom::after{
    border: none;
}
.findpage .van-tabs--line .van-tabs__wrap{
    height: .8rem;
} 
.findpage .van-tab--active{
    background: #ffe55c;
    border-radius: 1rem;
}
.findpage .van-tabs__nav{
      background: none;  
}
.findpage .van-tabs .van-tab__pane{
  background: #fff;
}   
</style>

